import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Card, message, Checkbox } from 'antd';

const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;

@connect(({ general, loading }) => ({
  general,
  loading: loading.models.general,
}))
@Form.create()
export default class ShowCommunityInfo extends PureComponent {
  /*
    处理表单数据
   */
  componentDidMount() {
    this.props.dispatch({
      type: 'general/getCommunityListByDistrict',
      payload: {
        districtId: this.props.districtObj.id,
      },
    });
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        /*
          成功后调用表单清除
         */
        console.log(this.props.districtObj.id);
        this.props.dispatch({
          type: 'district/manageCommunity',
          payload: {
            id: this.props.districtObj.id,
            districtCommunities: values.community.map(item => ({ communityId: item })),
          },
          callback: () => {
            this.props.form.resetFields();
            this.props.childObject();
          },
        });
      }
    });
  }
  handleSearch =(value) => {
    this.props.dispatch({
      type: 'general/getCommunityListByDistrict',
      payload: {
        districtId: this.props.districtId,
        communityName: value,
      },
    });
  }
  render() {
    const { general: { communityList } } = this.props;
    const districts = communityList && communityList.map(
      index => (
        {
          label: index.communityName,
          value: index.communityId,
          defaultChecked: index.isUseable,
          key: index.id,
        })
    );
    const defaultCheck = districts.filter(item => (item.defaultChecked === true));
    const defaultArray = defaultCheck.map(item => (item.value));
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    return (
      <Card bordered={false} loading={this.props.loading}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="小区"
          >
            {getFieldDecorator('keyword', {
            })(
              <Input.Search
                placeholder="输入关键字搜索"
                onSearch={(value) => { this.handleSearch(value); }}
                enterButton
              />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="小区"
          >
            {getFieldDecorator('community', {
              initialValue: defaultArray,
            })(
              <CheckboxGroup options={districts} />
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">保存</Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}
